import React from 'react'
import ReactDOM from 'react-dom'
import { Link,NavLink,Route } from 'react-router-dom'
import jsonObject from './index.json'

class SideNav extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return(
            <div className="navbar-default navbar-side" role="navigation">

                <div className="sidebar-collapse">
                    <ul className="nav">
                        {
                            jsonObject.map((item,index)=>{
                                return(
                                    item.path == '/'
                                        ? (
                                            <li key={index}>
                                                <NavLink exact activeClassName="active-menu" to={item.path}><i className={'fa '+item.icon}></i> {item.nav}</NavLink>
                                            </li>
                                        )
                                        : (
                                            <li className='active' key={index}>
                                                <Link to={item.path}><i className={"fa "+item.icon}></i> {item.nav}<span className="fa arrow"></span></Link>
                                                <ul className='nav nav-second-level collapse in'> {/*nav nav-second-level collapse in*/}
                                                    {
                                                        item.two.map((i,k)=>(
                                                            <li key={k}>
                                                                <NavLink to={i.path} activeClassName="active-menu">{i.nav}</NavLink>
                                                            </li>
                                                        ))
                                                    }
                                                </ul>
                                            </li>
                                        )


                                )

                            })
                        }
                    </ul>

                </div>

            </div>
        )
    }
}

export default SideNav;